<template>
  <div>
      <div class="minemaoxs">
          <div class="hadto">
              <div class="minehader">
                  <div class="left"><span class="iconfont icon-shezhi1"></span></div>
                  <div class="right"><span class="iconfont icon-tixing"></span><span class="iconfont icon-fenxiang1"></span></div>
              </div>
          </div>
          <div class="topbox">
              <div class="touxing">
                  <div class="img">
                      <img src="https://i1.douguo.com/upload/tuan/0/4/b/300_04ca36efa227fe7fcbbabeddffa4b3fb.jpg" alt="">
                  </div>
                  <div class="nametos">
                      <div class="name">
                          <span>123</span>
                      </div>
                      <div class="button">
                          <span class="iconfont"></span> <span>补全资料+五百经验值</span>
                      </div>
                  </div>
              </div>
              <div class="xintop">
                  <div class="toppo">
                    <span>厨男</span><span>豆龄0.2岁</span>
                  </div>
                  <div class="buttom">
                      <span>吃货不是在吃就是在去吃的路上,没时间写签名</span>
                  </div>
              </div>
          </div>
          <div class="liput">
              <div class="itemlis" v-for="(item,index) in lis " :key="index">
                  <span class="it num">{{item.num}}</span>
                  <span class="it">{{item.name}}</span>
              </div>
          </div>
          <div class="guanggaotos">
            <div class="tos">
                <div class="left">
                    <div class="ion">
                        <span class="iconfont icon-VIP"></span>
                    </div>
                    <div class="te">
                        <span class="tr pu">尊享VIP卡</span>
                        <span class="tr to"><span>400节好课免费学</span> <span class="iconfont icon-right-1-copy"></span></span>
                    </div>
                </div>
                <div class="right">
                    <div class="ion">
                        <span class="iconfont icon-jinbi_o"></span>
                    </div>
                    <div class="te">
                        <span class="tr pu">签到领钱</span>
                        <span class="tr to"><span>做任务赢现金</span> <span class="iconfont icon-right-1-copy"></span></span>
                    </div>
                </div>
            </div>
          </div>
          <div class="minelist">
              <van-grid :column-num="5" >
                <van-grid-item v-for="(item,index) in minelis" :key="index" :icon="item.icon" :text="item.name" @click="gauoatt(index)" />
              </van-grid>
          </div>
          <div class="bomyuto">
            <div class="poplists">
                  <div class="li" v-for="(item,index) in imgstos" :key="index">
                      <div class="img">
                        <span class="bao">包邮</span>
                        <img :src="item" alt="">
                        <div class="textpo">
                            <span>配料只有花生的花生酱</span>
                        </div>
                      </div>
                      <div class="textlto">
                          <span>花生酱0唐0添加高蛋白200g</span>
                      </div>
                      <div class="tel">
                        <span class="price">¥29.9</span>
                        <span class="toprice" >¥49.9</span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Grid, GridItem,Icon } from 'vant';
Vue.use(Grid);
Vue.use(GridItem).use(Icon);

export default {
    data(){
      return{
        lis:[
          {
            name:'关注',
            num:"0"
          },
          {
            name:'粉丝',
            num:"0"
          },
          {
            name:'被收藏',
            num:"0"
          },
           {
            name:'被学做',
            num:"0"
          },
           {
            name:'经验值',
            num:"28"
          },

        ],
        minelis:[
          {
            name:"创作中心",
            icon:"desktop-o"
          },
           {
            name:"草稿箱",
            icon:"delete-o"
          },
           {
            name:"膳食管理",
            icon:"birthday-cake-o"
          },
           {
            name:"厨具管理",
            icon:"shop-o"
          },
          {
            name:"最近浏览",
            icon:"eye-o"
          },
            {
            name:"采购清单",
            icon:"todo-list-o"
          },
            {
            name:"课堂",
            icon:"tv-o"
          },
          {
            name:"钱包",
            icon:"balance-o"
          },
          {
            name:"优惠券",
            icon:"coupon-o"
          },
           {
            name:"订单",
            icon:"balance-list-o"
          },

        ],
         imgstos:[
            "https://i1.douguo.com/upload/tuan/f/f/4/300_ffc9f1ff9d61b7ec0b3e9e05ac605574.jpg",
            "https://i1.douguo.com/upload/tuan/4/d/c/300_4db79d367a7f52077e448151c7a0d41c.jpg",
            "https://i1.douguo.com/upload/tuan/4/9/1/300_499e897981b283b8393ce650884129d1.jpg",
            "https://i1.douguo.com/upload/tuan/0/4/b/300_04ca36efa227fe7fcbbabeddffa4b3fb.jpg"

          ]
      }
    },
    methods:{
      gauoatt(index){
          console.log(index)
          if(this.minelis[index].name=="订单"){
              this.$router.push('/pinglisto');
          }
      }
    }
}
</script>

<style lang="less">
  .minemaoxs{
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
    .hadto{
      width: 100%;
      height: 50px;
      padding: 10px;
      box-sizing: border-box;
      .minehader{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        .left{
          width: 10%;
          height: 100%;
          text-align: center;
          line-height: 30px;
          span.iconfont{
            font-size: 24px;
          }
          
        }
        .right{
          width: 20%;
          height: 100%;
          display: flex;
          span{
            display: block;
            width: 50%;
            height: 100%;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            &.icon-tixing{
              font-size: 24px;
            }
          }
        }
      }
    }
    .topbox{
      width: 100%;
      height: 162px;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;
      .touxing{
        width: 100%;
        height: 90px;
        display: flex;
        justify-content: space-between;
        .img{
          width: 25%;
          height: 80px;
          overflow: hidden;
          img{
            margin: auto;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            // width:100%;
          }
        }
        .nametos{
          width: 70%;
          height: 80px;
          display: flex;
          flex-wrap: wrap;
          align-content: center;
          .name{
            width: 100%;
            height: 30px;
            line-height: 30px;
            span{
              font-size: 16px;
            }
          }
          .button{
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            font-weight: 600;
            
            border-radius: 20px;
            background-color: #ffc533;
          }
        }
      }
      .xintop{
        width: 100%;
        height: 60px;
        .toppo{
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          font-weight: 600;
          span{
            margin-right: 10px;
          }
        }
        .buttom{
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
        }
      }
    }
    .liput{
      width: 100%;
      height: 60px;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;
      display: flex;
      .itemlis{
        width: 25%;
        height: 100%;
        span{
          &.it{
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            display: block;
            font-size: 14px;
          }

          &.num{
            font-size: 14px;
            font-weight: 600;
          }
        }
      }
    }
    .guanggaotos{
      width: 100%;
      height: 50px;
      margin-top: 8px;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;
      position: relative;
      &::after{
          position: absolute;
          border-left: 2px solid #f3e1af;
          // border-right: 9px solid transparent;
          // border-bottom: 9px solid #e65a0a;
          content: " ";
          display: block;
  
          width: 0px;
          height: 60%;
          top:0;
          right: 0;
          bottom: 0;
          left:0;
          margin: auto;
      }
      .tos{
          width: 100%;
          height:100%;
          display: flex;
          border-radius: 8px;
          background-color: #565552;
          .left{
            width: 50%;
            height: 100%;
            padding-left: 10px;
            box-sizing: border-box;
            display: flex;
            .ion{
              width: 30%;
              height: 100%;
              text-align: center;
              line-height: 50px;
              span{
                &.iconfont{
                  font-size: 30px;
                }
              }
              color: #ffe294;
            }
            .te{
              width: 70%;
              height: 100%;
              display: flex;
              flex-wrap: wrap;
              align-content: center;
              span{
                &.tr{
                  display: block;
                  width: 100%;
                  height: 20px;
                  line-height: 25px;
                }
                &.pu{
                  font-size: 14px;
                  font-weight: 600;
                  color: #ffe294;
                 
                }
                &.to{
                  font-size: 10px;
                  color: #b8b8b8;
                  display: flex;
                  align-self: center;
                  span.icon-right-1-copy{
                    font-size: 12px;
                  }
                }
              }
            }
          }
          .right{
            width: 50%;
            height: 100%;
            padding-left: 10px;
            box-sizing: border-box;
            display: flex;
            .ion{
              width: 30%;
              height: 100%;
              text-align: center;
              line-height: 50px;
               span{
                &.iconfont{
                  font-size: 34px;
                }
              }
              color: #ffe294;
            }
            .te{
              width: 70%;
              height: 100%;
              display: flex;
              flex-wrap: wrap;
              align-content: center;
              span{
                &.tr{
                  display: block;
                  width: 100%;
                  height: 20px;
                  line-height: 25px;
                }
                &.pu{
                  font-size: 14px;
                  font-weight: 600;
                  color: #ffe294;
                }
                &.to{
                  font-size: 10px;
                  color: #b8b8b8;
                  display: flex;
                  align-self: center;
                  span.icon-right-1-copy{
                    font-size: 12px;
                  }
                }
              }
            }
          }
      }
     
    }
    .minelist{
      width: 100%;
      margin-top: 10px;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;
       .van-hairline--top::after {
          border-top-width: 0px;
        }
        .van-hairline::after{
          border: transparent;
        }
        .van-grid-item{
          height: 75px;
          .van-grid-item__text{
            font-size: 12px;
          }
        }
    }
    .bomyuto{
      width: 100%;
       .poplists{
          margin-top: 10px;
          width: 100%;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          .li{
            width: 45%;
            height: 285px;
            border-radius: 10px;
            overflow: hidden;
            .img{
              width: 100%;
              height: 190px;
              border-radius: 10px;
              position: relative;
              overflow: hidden;
              .bao{
                position: absolute;
                top: 8px;
                left: 8px;
                padding: 2px;
                border-radius: 4px;
                font-size: 10px;
                background-color: #ffce46;
              }
              img{
                width: 100%;
                height: 100%;
                margin: auto;
              }
              .textpo{
                width: 100%;
                height: 32px;
                position: absolute;
                bottom: 0;
                padding: 6px;
                box-sizing: border-box;
                background-color: #eeeeee;
                text-align: center;
                span{
                   font-size: 10px;
                }
              }
            }
            .textlto{
              width: 100%;
              height: 40px;
              text-align: left;
              font-size: 14px;
              overflow: hidden;
              padding-top: 10px;
            }
            .tel{
              width: 100%;
              height: 30px;
              display: flex;
              justify-content: left;
              align-items: center;
              span{
                &.price{
                  font-size: 16px;
                  margin-right: 5px;
                  color: #d8291b;
                }
                &.toprice{
                  font-size: 12px;
                  text-decoration:line-through;
                  color: #a5a5a5;
                }
              }
            }
          }
        }
    }
  }
</style>